<template>
  <div
    class="home-top100"
    ref="homeTop100"
  >
    <h2 class="class-title">TOP 100 <span class="go">查看完整榜单></span></h2>
    <el-card
      class="box-card"
      v-for="(top100,index) in top100List"
      :key="top100.id"
    >
      <div
        class="top100-wrap1"
        v-if="index === 0"
        @mouseover="changeColor(index)"
        @mouseout="moveColor()"
      >
        <i class="top100-top"></i>
        <img
          src="../../../../public/home/top100/1.jpg"
          alt=""
        >
        <h3 class="top100-title">{{ top100.title }}</h3>
        <div class="top100-score">
          {{ top100.score }}分
        </div>
      </div>
      <div
        class="top100-wrap2"
        v-else
        @mouseover="changeColor(index)"
        @mouseout="moveColor()"
      >
        <span
          class="top100-index"
          :class="{'activeIndex': index + 1 === 2 || index + 1 === 3 }"
        >{{ index + 1 }}</span>
        <span class="top100-title">{{ top100.title }}</span>
        <div class="top100-score">
          {{ top100.score }}分
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data: () => ({
    moveIndex:'',
    top100List: []
  }),
  created() {
    this.getTop100()
  },
  methods: {
    changeColor(index) {
      this.arr = Array.from(this.$refs.homeTop100.children).slice(1)
      this.arr[index].style.backgroundColor = '#eee'
      this.moveIndex = index
    },
    moveColor() {
      this.arr[this.moveIndex].style.backgroundColor = "#fff"
    },
    async getTop100() {
      try {
        const { data: { message } } = await this.Api.getTop100()
        this.top100List = message
      } catch (error) {
        this.$MsgBox('获取首页Top100的信息失败')
      }
    }
  }
}
</script>
<style lang="less">
.home-top100 {
  .class-title {
    color: #ffb400;
  }
  .el-card:nth-child(3).is-always-shadow,
  .el-card:nth-child(4).is-always-shadow,
  .el-card:nth-child(5).is-always-shadow,
  .el-card:nth-child(6).is-always-shadow,
  .el-card:nth-child(7).is-always-shadow,
  .el-card:nth-child(8).is-always-shadow,
  .el-card:nth-child(9).is-always-shadow,
  .el-card:nth-child(10).is-always-shadow,
  .el-card:nth-child(11).is-always-shadow{
    border: none;
    box-shadow:none;
  }
  .el-card {
    .el-card__body {
      padding: 0;
      .top100-wrap1 {
        height: 78px;
        position: relative;
        .top100-top {
          display: inline-block;
          position: absolute;
          left: 0;
          top: 0;
          width: 22px;
          height: 25px;
          background: url(../../../../public/home/hope/hope-top.png);
        }
        .top100-title {
          position: absolute;
          left: 130px;
          top: 20px;
          font-weight: normal;
        }
        .top100-score {
          position: absolute;
          left: 130px;
          bottom: 10px;
          color: #ffb400;
          font-size: 14px;
        }
      }
      .top100-wrap2 {
        height: 35px;
        padding: 10px 3px;
        line-height: 35px;
        .top100-index {
          display: block;
          width: 20px;
          font-size: 18px;
          float: left;
          font-style: italic;
          color: #999;
          margin-right: 10px;
        }
        .top100-title {
          display: block;
          max-width: 190px;
          overflow: hidden;
          font-size: 16px;
          color: #333;
          float: left;
        }
        .top100-score {
          display: block;
          float: right;
          color: #ffb400;
        }
        .activeIndex {
          color: #ef4238;
        }
      }
    } 
  }
}
</style>